$(function(){
    //拼接select
    var dataSelect=[
        ["total","全站"],
        ["54724","气象局"],
        ["D6042","农科园"],
        ["JN340","开发区"],
        ["D6045","玉皇庙"],
        ["D6194","贾庄"],
        ["D6198","张坊"],
        ["D6197","怀仁"],
        ["D6046","殷巷"],
        ["D6196","韩庙"],
        ["D6195","沙河"],
        ["D6199","孙集"],
        ["D6044","龙桑寺"],
        ["D6043","郑路"],
        ["D6041","白桥"]
    ];

    var stationIdsMap={
        "54724":"气象局","D6042":"农科园","JN340":"开发区","D6045":"玉皇庙","D6194":"贾庄","D6198":"张坊","D6197":"怀仁","D6046":"殷巷","D6196":"韩庙","D6195":"沙河","D6199":"孙集","D6044":"龙桑寺","D6043":"郑路","D6041":"白桥"
    };

    var htmlSelect="";
    for(var i=0;i<dataSelect.length;i++){
        if(dataSelect[i][0]=="total"){
            htmlSelect+='<option value="'+dataSelect[i][0]+'" selected>'+dataSelect[i][1]+'</option>'
        }else{
            htmlSelect+='<option value="'+dataSelect[i][0]+'">'+dataSelect[i][1]+'</option>'
        };
    };
    $('#select_weatherConditions').html(htmlSelect);

    //图表数据请求
    //降水
    var option_rain = {
        title : {
            show:false
        },
        tooltip : {
            show:false
        },
        legend: {
            show:false
        },
        toolbox: {
            show:false
        },
        grid:{
            show:true,
            left:"7%",
            top:50,
            right:'2%',
            bottom:60,
            borderWidth:0
        },
        yAxis : [
            {
                type : 'value',
                name:"降水 mm",
                nameTextStyle:{
                    fontSize:12
                },
                axisLabel : {
                    color:'#333',
                    formatter: '{value}',
                    fontSize:12
                },
                axisLine:{
                    lineStyle:{
                        color:"#333"
                    }
                },
                splitArea:{
                    show:true,
                    areaStyle:{
                        color:['#29394e','#1e2e45']
                    }
                },
                splitLine:{
                    show:false
                }
            }
        ],
        dataZoom: {
            show: true,
            realtime: true,
            height: 20,
            start: 0,
            end: 50
        },
        visualMap: {
            top: 0,
            right: 0,
            left:0,
            pieces: [
                {
                    gt: 0,
                    lte: 10,
                    color: 'blue'
                },
                {
                    gt: 10,
                    lte: 50,
                    color: 'yellow'
                },
                {
                    gt: 50,
                    lte: 100,
                    color: 'orange'
                },
                {
                    gt: 100,

                    color: 'red'
                }
            ],
            outOfRange: {
                color: '#999'
            },
            orient:'horizontal',
            itemWidth:15,
            itemHeight:10,
            padding:0,
            left:20,
            textStyle:{
                color:'#333',
                fontSize:12
            }
        },
        series : [],
    };
    //风向
    var option_wind = {
        title : {
            show:false
        },
        tooltip : {
            show:false
        },
        legend: {
            show:false
        },
        toolbox: {
            show:false
        },
        grid:{
            show:true,
            left:"8%",
            top:25,
            right:'2%',
            bottom:60,
            borderWidth:0
        },
        yAxis : [
            {
                type : 'value',
                name : '风速风向 m/s',
                nameTextStyle:{
                    fontSize:12
                },
                axisLabel : {
                    color:'#333',
                    formatter: '{value}',
                    fontSize:12
                },
                axisLine:{
                    lineStyle:{
                        color:"#333"
                    }
                },
                splitArea:{
                    show:true,
                    areaStyle:{
                        color:['#29394e','#1e2e45']
                    }
                },
                splitLine:{
                    show:false
                }
            }
        ],
        dataZoom: {
            show: true,
            realtime: true,
            height: 20,
            start: 0,
            end: 50
        },
        series : [],
    };
    //温度
    var option_temp = {
        title : {
            show:false
        },
        tooltip : {
            show:false
        },
        legend: {
            show:false
        },
        toolbox: {
            show:false
        },
        grid:{
            show:true,
            left:"7%",
            top:50,
            right:'2%',
            bottom:60,
            borderWidth:0
        },
        yAxis : [
            {
                type : 'value',
                name : '温度 °C',
                nameTextStyle:{
                    fontSize:12
                },
                axisLabel : {
                    color:'#333',
                    formatter: '{value}',
                    fontSize:12
                },
                axisLine:{
                    lineStyle:{
                        color:"#333"
                    }
                },
                splitArea:{
                    show:true,
                    areaStyle:{
                        color:['#29394e','#1e2e45']
                    }
                },
                splitLine:{
                    show:false
                }
            },

        ],
        dataZoom: {
            show: true,
            realtime: true,
            height: 20,
            start: 0,
            end: 50
        },
        series : [],
        color:["#5db5c3","#ffe24c","#c6612d","#c6862f","#7bb254"]
    };
    myChart_rain = echarts.init(document.getElementById('rain_weatherConditions'));
    myChart_temp = echarts.init(document.getElementById('temp_weatherConditions'));
    myChart_wind = echarts.init(document.getElementById('wind_weatherConditions'));

    var label={
        show:true,
        position:'top',
        fontSize:12,
        color:"#333",
        formatter:function(obj){
            if(obj.value>0){
                return obj.value
            }else{
                return ""
            }
        }
    }

    function showTotalDataEcharts(){
        $.ajax({
            "url":"http://test.yulaile.cc/bootspr/weatherdata/hisotryTotalData",
            type:'GET', //POST
            async:true,    //或false,是否异步
            data:{},
            dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            success:function(json){
//          		console.log(json.data.time);
                $('#mark_rain').fadeOut();
                if(json && json.data){
                    setTimeout(function(){
                        $(".fabu").html(json.data.time.substring(11,16)+"发布");
                    },0)

                    var L20TmaxTemps=[];
                    var L20TminTemps=[];
                    var L20Trains=[];
                    var L20Twind=[];

                    var L6maxTemps=[];
                    var L6minTemps=[];
                    var L6rains=[];
                    var L6wind=[];

                    var L24maxTemps=[];
                    var L24minTemps=[];
                    var L24rains=[];
                    var L24wind=[];

                    var nowtemps=[];
                    var nowwind=[];

                    var stationIdsArr=[];
                    var stationNamesArr=[];

                    var data=json.data;

                    L20TmaxTemps=data["20TmaxTemps"];
                    L20TminTemps=data["20TminTemps"];
                    L20Trains=data["20Trains"];
                    L20Twind=data["20Twind"];

                    L6maxTemps=data.L6maxTemps;
                    L6minTemps=data.L6minTemps;
                    L6rains=data.L6rains;
                    L6wind=data.L6wind;

                    L24maxTemps=data.L24maxTemps;
                    L24minTemps=data.L24minTemps;
                    L24rains=data.L24rains;
                    L24wind=data.L24wind;

                    stationIdsArr=data.stationIds;

                    nowtemps=data.nowtemps;
                    nowwind=data.nowwind;


                    for(var i=0;i<stationIdsArr.length;i++){
                        stationNamesArr.push(stationIdsMap[stationIdsArr[i]]);
                    };

                    var xAxis=[
                        {
                            type : 'category',
                            axisLabel : {
                                color:'#333',
                                //interval:0,
                                fontSize:12
                            },
                            axisLine:{
                                lineStyle:{
                                    color:"#333"
                                }
                            },
                            data:stationNamesArr
                        }
                    ];

                    var legend={
                        show:true,
                        textStyle:{
                            color:'#333',
                            fontSize:12
                        },
                        left:"1%",
                        top:0,
                        itemWidth:12,
                        itemHeight:8,
                        itemGap:0,
                        padding:0
                    };

                    //降水量图表
                    option_rain.xAxis=xAxis;
                    //初始化时显示今日累计对比
                    option_rain.series=[
                        {name:"",type:'bar',label:label, data:L20Trains}
                    ];
                    myChart_rain.clear();
                    myChart_rain.setOption(option_rain);

                    //降水的三个按钮点击事件
                    $('#rainButton_weatherConditions').delegate('li','click',function(){
                        $('#rainButton_weatherConditions').find('li').removeClass('current_weatherConditions');
                        $(this).addClass('current_weatherConditions');
                        if($(this).attr("dataKey")=="today"){
                            option_rain.series=[
                                {name:"",type:'bar',label:label ,data:L20Trains}
                            ];
                        }else if($(this).attr("dataKey")=="L6"){
                            option_rain.series=[
                                {name:"",type:'bar',label:label ,data:L6rains}
                            ];
                        }else if($(this).attr("dataKey")=="L24"){
                            option_rain.series=[
                                {name:"",type:'bar',label:label ,data:L24rains}
                            ];
                        }
                        myChart_rain.clear();
                        myChart_rain.setOption(option_rain);
                    });

                    //风向风速图表
                    option_wind.xAxis=xAxis;
                    option_wind.series=[
                        {name:"",type:'line',symbol:"arrow",symbolSize:10,symbolOffset:['0%','0%'],data:nowwind},
                    ];
                    myChart_wind.clear();
                    myChart_wind.setOption(option_wind);

                    $('#windButton_weatherConditions').delegate('li','click',function(){
                        $('#windButton_weatherConditions').find('li').removeClass('current_weatherConditions');
                        $(this).addClass('current_weatherConditions');
                        if($(this).attr("dataKey")=="now"){
                            option_wind.series=[
                                {name:"",type:'line',symbol:"arrow",symbolSize:10,symbolOffset:['0%','0%'],data:nowwind},
                            ];
                        }else if($(this).attr("dataKey")=="today"){
                            option_wind.series=[
                                {name:"",type:'line',symbol:"arrow",symbolSize:10,symbolOffset:['0%','0%'],data:L20Twind},
                            ];
                        };
                        myChart_wind.clear();
                        myChart_wind.setOption(option_wind);
                    });


                    //温度图表
                    option_temp.xAxis=xAxis;
                    option_temp.series=[
                        {name:"当前气温对比",type:'line',label:label,data:nowtemps},
                        {name:"今日最高气温对比",type:'line',label:label,data:L20TmaxTemps},
                        {name:"今日最低气温对比",type:'line',label:label,data:L20TminTemps},
                    ];
                    option_temp.legend=legend;
                    myChart_temp.clear();
                    myChart_temp.setOption(option_temp);
                }
            }
        });
    };

    //初始化是显示的是全站信息
    showTotalDataEcharts();

    $('#select_weatherConditions').bind('change',function(){
        var indexVal=$(this).val();
        $('#mark_rain').fadeIn();
        if(indexVal=="total"){
            showTotalDataEcharts();
            $('.buttonGroups_weatherConditions').show();
        }else{
            $('.buttonGroups_weatherConditions').hide();
            $.ajax({
                "url":"http://test.yulaile.cc/bootspr/weatherdata/history ",
                type:'GET', //POST
                async:true,    //或false,是否异步
                data:{
                    stationId:indexVal
                },
                dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success:function(json){
                    $('#mark_rain').fadeOut();
                    if(json && json.data){
                        var data=json.data;
                        var datetimeSingle=[];
                        var maxTempSingle=[];
                        var minTempSingle=[];
                        var rainSingle=[];
                        var temperatureSingle=[];
                        var windDirectionSingle=[];
                        var windSpeedSingle=[];

                        var wind=[];

                        for(var i=0;i<data.length-1;i++){
                            datetimeSingle.push(data[i].datetime.substring(11,13));
                            rainSingle.push(data[i].rain);
                            maxTempSingle.push(data[i].maxTemp);
                            minTempSingle.push(data[i].minTemp);
                            temperatureSingle.push(data[i].temperature);
                            windDirectionSingle.push(data[i].windDirection);
                            windSpeedSingle.push(data[i].windSpeed);
                            wind.push({symbolRotate:data[i].windDirection,value:data[i].windSpeed})

                        };

                        var xAxis=[
                            {
                                type : 'category',
                                axisLabel : {
                                    color:'#333',
                                    formatter: function(value){
                                        return value+'时'
                                    },
                                    fontSize:12
                                },
                                axisLine:{
                                    lineStyle:{
                                        color:"#333"
                                    }
                                },
                                data:datetimeSingle
                            }
                        ];


                        //降水量图表
                        option_rain.xAxis=xAxis;
                        option_rain.series=[
                            {name:"",type:'bar',data:rainSingle},
                        ];
                        myChart_rain.clear();
                        myChart_rain.setOption(option_rain);

                        //温度图表
                        option_temp.xAxis=xAxis;
                        option_temp.series=[
                            {name:"",type:'line',barWidth:15,data:temperatureSingle},
                        ];
                        myChart_temp.clear();
                        myChart_temp.setOption(option_temp);

                        //风向风速图表
                        option_wind.xAxis=xAxis
                        option_wind.series=[
                            {name:"",type:'line',symbol:"arrow",symbolSize:10,symbolOffset:['0%','0%'],data:wind},
                        ];
                        myChart_wind.clear();
                        myChart_wind.setOption(option_wind);
                    };
                }
            });
        };
    });
});


